<template>
  <div class="app-container">
    <el-card>
      <el-card
        class="filter-container"
        shadow="never"
      >
        <div>
          <i class="el-icon-search"></i>
          <span>筛选搜索</span>
          <el-button
            style="float:right"
            type="primary"
            @click="handleSearchList()"
            size="small"
          >
            查询搜索
          </el-button>
          <el-button
            style="float:right;margin-right: 15px"
            @click="handleResetSearch()"
            size="small"
          >
            重置
          </el-button>
        </div>
        <div style="margin-top: 15px">
          <el-form
            :inline="true"
            :model="listQuery"
            size="small"
            label-width="140px"
          >
            <el-form-item label="姓名：">
              <el-input
                v-model="listQuery.name"
                class="input-width"
                placeholder="输入姓名"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号：">
              <el-input
                v-model="listQuery.mobile"
                class="input-width"
                placeholder="输入手机号"
                clearable
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <el-card
        class="operate-container"
        shadow="never"
      >
        <i class="el-icon-tickets"></i>
        <span>数据列表</span>
      </el-card>
      <div class="table-container">
        <el-table
          ref="homeAdvertiseTable"
          :data="list"
          style="width: 100%;"
          @selection-change="handleSelectionChange"
          v-loading="listLoading"
          border
        >
          <el-table-column
            label="预约人"
            align="center"
          >
            <template slot-scope="scope">{{ scope.row.userName }}</template>
          </el-table-column>
          <el-table-column
            label="手机号"
            align="center"
          >
            <template slot-scope="scope">{{ scope.row.mobile }}</template>
          </el-table-column>
          <el-table-column
            label="所属社区"
            align="center"
          >
            <template slot-scope="scope">{{ scope.row.communityName }}</template>
          </el-table-column>
          <el-table-column
            label="所属楼号"
            align="center"
          >
            <template slot-scope="scope">{{ scope.row.floor }}</template>
          </el-table-column>
          <el-table-column
            label="预约日期"
            align="center"
          >
            <template slot-scope="scope">{{ scope.row.handleDate }}</template>
          </el-table-column>
          <el-table-column
            label="预约时段"
            align="center"
          >
            <template slot-scope="scope">{{ scope.row.handleTime | formatDateTime }}</template>
          </el-table-column>
          <!--<el-table-column-->
          <!--label="状态"-->
          <!--align="center"-->
          <!--&gt;-->
          <!--<template slot-scope="scope">{{ scope.row.status | formatStatus }}</template>-->
          <!--</el-table-column>-->
        </el-table>
      </div>
      <div class="pagination-container" style="margin-bottom: 20px">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next,jumper"
          :page-size="listQuery.pageSize"
          :page-sizes="[5,10,15]"
          :current-page.sync="listQuery.pageNum"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>

    <el-row type="flex" justify="end" style="margin-top: 20px">
      <el-col :span="2">
        <el-button @click="back">返回</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { hcControllerList } from '@/api/neighbour'
import moment from 'moment'
import { formatDate } from '@/utils/date'
const defaultListQuery = {
  pageNum: 1,
  pageSize: 10
}
export default {
  name: 'GuideList',
  data () {
    return {
      listQuery: Object.assign({}, defaultListQuery),
      list: null,
      total: null,
      listLoading: false,
      multipleSelection: [],
      loading: false
    }
  },
  created () {
    this.getList()
  },
  filters: {
    formatDateTime (time) {
      if (time == null || time === '') {
        return 'N/A'
      }
      return `${moment(time.split('-')[0]).format('HH:mm')}-${moment(time.split('-')[1]).format('HH:mm')}`
    },
    formatStatus (status) {
      return { '4': '生效', '5': '失效' }[status]
    }
  },
  methods: {
    handleResetSearch () {
      this.listQuery = Object.assign({}, defaultListQuery)
    },
    handleSearchList () {
      this.listQuery.pageNum = 1
      this.getList()
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleSizeChange (val) {
      this.listQuery.pageNum = 1
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.listQuery.pageNum = val
      this.getList()
    },
    getList () {
      this.listLoading = true
      const params = {
        hcId: this.$route.query.id,
        ...this.listQuery
      }
      hcControllerList(params).then((response) => {
        this.listLoading = false
        this.list = response.data.list
        this.total = response.data.total
      })
    },
    back () {
      this.$router.go(-1)
    }
  }
}
</script>
<style scoped>
  .input-width {
    width: 203px;
  }
</style>
